<template>
  <!--
      作者：luoyiming
      时间：2019-10-25
      描述：应用-基础设置
  -->
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <div class="common-form">支付方式设置</div>
      <el-form-item label="选择支付方式">
        <div v-for="(item, key, index) in platform" :label="item.value" :key="index">
          <div class="fb">{{item.name}}</div>
          <el-checkbox-group v-model="form.payType[key].payType">
            <el-checkbox v-for="(pay_item,pay_index) in item.payType" :label="payType[pay_item].value" :key="pay_index">{{payType[pay_item].name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <div class="common-form">微信支付设置</div>

      <el-form-item label="微信支付商户号 MCHID">
        <el-input v-model="form.mchid" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="微信支付密钥 APIKEY ">
        <el-input v-model="form.apikey" class="max-w460"></el-input>
      </el-form-item>

      <el-form-item label="p12证书">
        <div class="leval-item upload-btn">
          <el-upload class="avatar-uploader" ref="upload" action="string" accept=".p12"
            :before-upload="onBeforeUploadP12" :http-request="UploadP12" :show-file-list="false" :on-change="fileChange">
            <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
          </el-upload>
          <div class="red" v-if="form.p12!=null">已上传p12证书</div>
        </div>
        <div class="gray">退款需要用到p12证书</div>
      </el-form-item>
      <!--提交-->
      <div class="common-button-wrapper"><el-button type="primary" @click="onSubmit">提交</el-button></div>
    </el-form>
  </div>
</template>

<script>
import AppSettingApi from '@/api/appsetting.js';
import {deepClone, formatModel} from '@/utils/base.js'
export default {
  data() {
    return {
      form: {
        payType: [],
        mchid: '',
        apikey: '',
        p12: null
      },
      app: {},
      payType: [],
      platform: []
    };
  },
  created() {
    this.getData();
  },

  methods: {
    /*获取数据*/
    getData() {
      let self = this;
      AppSettingApi.payDetail({}, true)
        .then(res => {
          self.app = res.data.app;
          self.payType = res.data.payType;
          self.platform = res.data.platform;
          self.form = formatModel(self.form, res.data.app);
          console.log(self.form);
          if(self.app.payTypeJson == null || self.app.payTypeJson == ''){
            self.form.payType = deepClone(res.data.platform);
          }else{
            self.form.payType = deepClone(self.app.payTypeJson);
            Object.getOwnPropertyNames(self.form.payType).forEach(function(key){
              for(let i=0;i<self.form.payType[key].payType.length;i++){
                self.$set(self.form.payType[key].payType, i, parseInt(self.form.payType[key].payType[i]));
              }
            })
          }
          console.log(self.form);
        })
        .catch(error => {
          console.log(error);
        });
    },

    //提交表单
    onSubmit() {
      let self = this;
      let params = self.form;
      AppSettingApi.editPay(params, true)
        .then(data => {
          self.$message({
            message: '恭喜你，设置成功',
            type: 'success'
          });
        })
        .catch(error => {});
    },
    /*选择上传图片*/
    fileChange(e) {
      console.log(e);
    },

    /*选择图片之前*/
    onBeforeUploadP12(file) {
      return true;
    },

    /*上传图片*/
    UploadP12(param) {
      let self = this;
      const loading = this.$loading({
        lock: true,
        text: '文件上传中,请等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const formData = new FormData();
      formData.append('iFile', param.file);
      AppSettingApi.uploadP12(formData)
        .then(response => {
          loading.close();
          self.$message({
            message: '本次上传文件成功',
            type: 'success'
          });
          param.onSuccess(); // 上传成功的图片会显示绿色的对勾
        })
        .catch(response => {
          loading.close();
          self.$message({
            message: '本次上传文件失败',
            type: 'warning'
          });
          param.onError();
        });
    },
  }
};
</script>

<style>
</style>
